<html>
	<head>
		<title>Forum-Category</title>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<script src="js/jquery-2.0.3.min.js"></script>
		<link href="css/Forum_StyleRed.css" rel="stylesheet">
		<script>
			$(document).ready(function()
				{
					$("#forum1").click(function()
					{
						window.location.href ="";
					})
					$("#forum2").click(function()
					{
						window.location.href ="";
					})
					$("#forum3").click(function()
					{
						window.location.href ="";
					})
					$("#forum4").click(function()
					{
						window.location.href ="";
					})
				}
			);
		</script>
	</head>
	<body>
		<div class="navbar navbar-fixed-top navbar-inverse">		
	        	<div class="container">	
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">Home</a></li>
					<li ><a href="#">About Us</a></li>
					<li ><a href="#">Services</a></li>
					<li ><a href="#">Community</a></li>
					<li ><a href="#">Contact US</a></li>
				<ul>
			</div>
		</div>
		<br><br><br><br>
		<div class="row">
  			<div class="col-md-2"></div>
			<div class="col-md-10">
				<h3>Open Source Discussion Board</h3>
				<div id="accordionChange">
					<div class="panel-group" id="accordion">
  						<div class="panel panel-default">
    							<div class="panel-heading">
      								<h4 class="panel-title">
        							<a data-toggle="collapse" class="accordion-toggle"data-parent="#accordion" href="#collapseOne">Forum Category</a>
      								</h4>
    							</div>
							<div id="collapseOne" class="panel-collapse collapse in">
      								<div class="panel-body">
									<table class="table table-bordered table-hover">
										<tr><th>Forum Name</th><th>topic</th></tr>
										<tr><td>Description</td><td>12</td></tr>
										<tr><td>Description</td><td>10</td></tr>
										<tr><td>Description</td><td>14</td></tr>	
									</table>
								</div>
   					 		</div>
  						</div>
						<br>
	  					<div class="panel panel-default">
    							<div class="panel-heading">
      								<h4 class="panel-title">
       								<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Forum Category</a>
      								</h4>
    							</div>
    							<div id="collapseTwo" class="panel-collapse collapse in">
     								 <div class="panel-body">
 									<table class="table table-bordered table-hover">
										<tr><th>Forum Name</th><th>topic</th></tr>
										<tr><td>Description</td><td>12</td></tr>
										<tr><td>Description</td><td>10</td></tr>
										<tr><td>Description</td><td>14</td></tr>	
									</table>
      								</div>
    							</div>
  						</div>
  	`					<div class="panel panel-default">
    							<div class="panel-heading">
      								<h4 class="panel-title">
        							<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Forum Category</a>	
      								</h4>
    							</div>
    							<div id="collapseThree" class="panel-collapse collapse in">
      								<div class="panel-body">
									<table class="table table-bordered table-hover">
										<tr><th>Forum Name</th><th>topic</th></tr>
										<tr><td>Description</td><td>12</td></tr>
										<tr><td>Description</td><td>10</td></tr>
										<tr><td>Description</td><td>14</td></tr>	
									</table>
      								</div>
    							</div>
  						</div>	
					</div>
				</div>
			</div>
		</div>
		<script src="js/bootstrap.js"></script>
	</body>
</html>
		

